<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
        <title>Band Together</title>
        <style type="text/css">
        </style>

        <link rel="Shortcut Icon" href="http://backup.physics.tamu.edu/media/bt.png" type="image/x-icon" >
	<link rel="stylesheet" type="text/css" href="http://backup.physics.tamu.edu/media/index.css" >
	<link rel="stylesheet" type="text/css" href="http://backup.physics.tamu.edu/media/menu.css" >
	
	<!--For location popups-->
	<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
	<script src="http://backup.physics.tamu.edu/media/popup.js" type="text/javascript"></script>
	<script type="text/javascript" src="utils.js"></script>
	<link rel="stylesheet" href="http://backup.physics.tamu.edu/media/general.css" type="text/css" media="screen" />
	<!--End of location popups-->
	
	<script type="text/javascript">
	/*Shows and hides our calendar frame*/
	function ShowHideCal()
	{ 
		cal = document.getElementById("CalFrame");
		if(cal.style.display == "none")
		{
			document.getElementById("calBut").value = "Hide Calendar";
			cal.style.display = "block";
		}
		else
		{
			document.getElementById("calBut").value = "Show Calendar";
			cal.style.display = "none";
		}
	}
	</script>
	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
	<script type="text/javascript">
	$(function() {
        var registerform = $("#registerform");
        var dom = $(document),
                domWidth = dom.width(),
                domHeight = dom.height();
        var overlay = $("#overlay");

        overlay.css({
                width: domWidth,
                height: domHeight,
                opacity: 0.8
        }).show();

        registerform.show();

        $(window).resize(function() {
                var dom = $(document),
                        domWidth = dom.width(),
                        domHeight = dom.height();
                if (overlay.is(':visible')) {
                        overlay.css({
                                width: domWidth,
                                height: domHeight
                        });
                };
        });

        $("#close").click(function() {
                registerform.hide();
                overlay.hide();
		return false;
        	});
	});
	 
	</script>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">

	var timeout     = 500;
	var closetimer  = 0;
	var ddmenuitem  = 0;

	function jsddm_open()
	{       jsddm_canceltimer();
        	jsddm_close();
        	ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

	function jsddm_close()
	{       if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

	function jsddm_timer()
	{       closetimer = window.setTimeout(jsddm_close, timeout);}

	function jsddm_canceltimer()
	{       if(closetimer)
        	{       window.clearTimeout(closetimer);
        	        closetimer = null;}}

	$(document).ready(function()
	{       $('#jsddm > li').bind('mouseover', jsddm_open);
        	$('#jsddm > li').bind('mouseout',  jsddm_time);
	});

	document.onclick = jsddm_close;

	</script>

</head>
<body>

{% autoescape on %}

<!--change location -->
	<div id="popupContact">
		<p id="contactArea">
			<form action="" method="POST" name="locForm" onsubmit="return checkForm()">
				<label for="id_location">Enter your location:</label>
				<input type="text" name="locField" />
				<input type="submit" value="Submit" name="Submit"></input>
			</form>
		</p>
	</div>
<div id="backgroundPopup"></div>
<!-- done -->

<div class="main">
	<div class="header">
		<img src="http://backup.physics.tamu.edu/media/title.png" alt="Band Together" />
		<div class="slogan">
			<img src="http://backup.physics.tamu.edu/media/connect.png" alt="connect to local music" />
		</div>
		
		<ul id="jsddm">
			<li><a href="http://backup.physics.tamu.edu/bandtogether/">Home</a>
			</li>
			<li><a href="#">Find</a>
				<ul>
					<li><a href="http://backup.physics.tamu.edu/bandtogether/find/venue/">Venue</a></li>
					<li><a href="http://backup.physics.tamu.edu/bandtogether/find/artist/">Artists</a></li>
					<li><a href="http://backup.physics.tamu.edu/bandtogether/find/genre/">Genre</a></li>
				</ul>
       			</li>
            		<li id="button">Change Location</li>
			<li id="bar">
				&nbsp;
			</li>
            	</ul>

	</div>

	<br><br>	

	<h1 style="text-indent:1em;">Popular Artists near {{ my_location }}</h1>
	<div class="box">
		
		{% if my_location %}
		<table cellpadding="40px">
			<tr>
				<td><center><img alt="Blaggards" style="width: 5em; height: 5em;" src="http://backup.physics.tamu.edu/media/blaggards.jpg"><br>
				Blaggards</center>
				</td>
				<td><center><img alt="Strawberry Jam" style="width: 5em; height: 5em;" src="http://backup.physics.tamu.edu/media/jam.jpg"><br>
				Strawberry Jam</center>
				</td>
				<td><center><img alt="Heart" style="width: 5em; height: 5em;" src="http://backup.physics.tamu.edu/media/heart.jpg"><br>
				The Heart is a Lonely Hunter</center>
				</td>
				<td><center><img alt="Lindsay Harris" style="width: 5em; height: 5em;" src="http://backup.physics.tamu.edu/media/lindsay.jpg"><br>
				Lindsay Harris</center>
				</td>
				<td><center><img alt="Addison Bennett" style="width: 5em; height: 5em;" src="http://backup.physics.tamu.edu/media/addison.jpg"><br>
				Addison Bennett</center>
				</td>
			</tr>
		</table>
		</ul>
		{% else %}
		No artists near your area. Did you set your location yet?
		{% endif %}
		
	</div>

	<h1 style="text-indent:1em;">Upcoming Concerts near {{ my_location }}</h1>
	<div class="box">
		
		{% if my_location %}
		<ul style="list-style-type:none;">
			<li>
				<table cellpadding="10px">
					<tr>
						<td><img style="width: 5em; height: 5em;" src="http://backup.physics.tamu.edu/media/gilbert.jpeg" /></td>
						<td>
							<div style="padding-left: 2em;">
								<p>May 11</p>
						    		<p>Brantley Gilbert</p>
						    		<p>Texas Hall Of Fame, College Station</p>
						    	</div>
						</td>
						
						<td><img style="width: 5em; height: 5em;" src="http://backup.physics.tamu.edu/media/sour.jpeg" /></td>
						<td>
							<div style="padding-left: 2em;">
								<p>May 13</p>
						    		<p>Sour Soul</p>
						    		<p>Stafford Main, Bryan</p>
						    	</div>
						</td>
					</tr>
				</table>
			</li>
		</ul>
		{% else %}
		No upcoming concerts in your area. Did you set your location yet?
		{% endif %}
		
	</div>

	<h1 style="text-indent:1em;">Event Calendar</h1>
	<div class="box">
		<div class="grow" style="float:left; margin-right: 10px;" >
			<input type="button" id="calBut" value="Hide Calendar" onclick="ShowHideCal();"/>
		</div>
	</div>
	
	<div class="calendar">
		<center><iframe id="CalFrame" src="https://www.google.com/calendar/embed?src=bandtogether.tamu%40gmail.com&ctz=America/Chicago" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe></center>
	</div>
	
	<p>
	<div class="footer">
		<table border="0">
			<tr>
				<td><a href="http://backup.physics.tamu.edu/bandtogether/about/">About Us</a></td>
				<td><a href="http://backup.physics.tamu.edu/bandtogether/info/faq/">FAQ</a></td>
				<td><a href="http://backup.physics.tamu.edu/bandtogether/directory/artist">Artist directory</a></td>
			</tr>
			<tr>
				<td><a href="http://backup.physics.tamu.edu/bandtogether/info/team/">Team</a></td>
				<td><a href="http://backup.physics.tamu.edu/bandtogether/info/terms/">Terms of Use</a></td>
				<td><a href="http://backup.physics.tamu.edu/bandtogether/directory/venue/">Venue directory</a></td>
			</tr>
			<tr>
				<td><a href="http://backup.physics.tamu.edu/bandtogether/info/developer/">API</a></td>
				<td><a href="http://backup.physics.tamu.edu/bandtogether/info/tour/">What is Band Together?</a></td>
			</tr>
		</table>
	<br>
	<img src="http://backup.physics.tamu.edu/media/bottomLogo.png" alt="Band Together" />
	</div>
</div>
{% endautoescape %}
</body>
</html>
